// // 一、头部
// // 已经移至公共js文件
// // 登录信息获取


// 二、内容
/**
 * 方法说明 利用jq的ajax 异步获取分类数据，同步赋值
 * @param 
 * @return 
 */
async function getAjaxMeun() {
	let d = null;
	await $.ajax({
		url: "http://phpclub.org.cn:8080/api//system/category",
		dataType: "json",
		type: 'get',
		success: function(datas) {
			d = datas;
		}
	})
	return d;
}
getAjaxMeun().then(function(data) {
	// 判断是否返回数据
	if (!data.data) {
		return;
	}
	//获取左边导航栏对象
	let leftUl = $('.cont-menus>ul');
	//获取右边商品对象
	let rightDl = $('.c-menus-hide');
	//1、取出data数据
	let Data = data.data;
	let ulHtml = '';
	let hideHtml = '';
	//2、设置左边导航栏
	for (let v1 of Data) {
		ulHtml += `<li data-Id="${v1.id}" data-parentId="${v1.parentId}">
						<a href="javascript:void(0)">${v1.cateName}</a>
					</li>`;

		// 判断是否有子级数据
		if (!v1.children) {
			continue;
		}
		// 3、设置右边商品对象
		let dlHtml = '';
		for (let v2 of v1.children) {
			// console.log(v2);
			let dtHtml = `<dt>
							<a href="" data-Id="${v2.id}">
								${v2.cateName}
								<i class="iconfont">&#xe660;</i>
							</a>
						</dt>`;
			// 判断是否有商品种类具体商品数据
			if (!v2.children) {
				continue;
			}
			// 再次循环取出商品种类具体商品
			let ddHtml = '';
			for (let v3 of v2.children) {
				ddHtml += ` <a href="" data-Id='${v3.id}' data-parentId="${v3.parentId}">
								${v3.cateName}
						    </a>`;
			}
			ddHtml = "<dd>" + ddHtml + "</dd>";
			// 因为数据未给全所以都显示 style='display:none'
			dlHtml += `<dl>` + dtHtml + ddHtml + "</dl>";
		}
		//向右边商品添加ol标签 --默认不显示
		hideHtml += dlHtml;
	}
	//添加左边导航栏
	leftUl.html(ulHtml);
	//添加右边商品
	rightDl.html(hideHtml);
})

// 监听鼠标滑过菜单导航就显示具体商品
$('.cont-menus>ul').on('mouseenter', 'li', function(e) {
	$('.c-menus-hide').css({
		display: "block",
		zIndex: 100
	});
}).parent().parent().find('.c-menus-hide').on("mouseleave", function(e) {
	$('.c-menus-hide').css({
		display: "none"
	});
})

// 轮播图
$.ajax({
	url: "http://phpclub.org.cn:8080/api/system/homeSlide",
	type: "post",
	dataType: "json",
	success: function(da) {
		if (da.count <= 0 || !da.data) {
			return;
		}
		// 保存图片数据
		let dataImgs = da.data;
		// 获取轮播图操作对象
		let swpers = $('.swpper1 .carousel-inner');
		//获取指示符操作对象
		let indicators = $(".swpper1 .carousel-indicators");
		//轮播图Html
		let swperHtml = '';
		// 指示符Html
		let indHtml = "";
		for (let i = 0; i < dataImgs.length; i++) {
			let active;
			i == 0 ? active = "active" : active = "";
			// 轮播图Html生成
			swperHtml += ` <div class="carousel-item ${active}">
								<a href="${dataImgs[i].link}" data-Id="${dataImgs[i].id}">
									<img src=${dataImgs[i].imgUrl} title="${dataImgs[i].title} " data-Id="${dataImgs[i].id}" />
								</a>
						    </div>`;
			// 指示符Html生成
			indHtml +=
				`<li data-target="#demo" data-slide-to="${i}" class="active" class='${active}'></li>`;
		}
		// 插入轮播图
		swpers.html(swperHtml);
		//插入指示符
		indicators.html(indHtml);
	}
})

// Top热榜商品
$.ajax({
	url: "http://phpclub.org.cn:8080/api/system/indexData",
	type: "get",
	dataType: "json",
	success: function(dataJson) {
		//判断data数据对象存在
		if (!dataJson.data) {
			return;
		}
		//储存商品数据
		let data = dataJson.data;
		//判断topAd数据对象存在
		if (!data.topAd) {
			return;
		}
		//获取Top热榜商品dom对象
		let topDom = $('.context .main .top>ul');
		// 商品列表liHtml
		let liHtml = '';
		for (let i = 0; i < data.topAd.length; i++) {
			liHtml += `<li>
							<a href="${data.topAd[i].href}">
							  <img src="${data.topAd[i].imgSrc}" >
							</a>
						</li>`;
		}
		// 添加
		topDom.html(liHtml);

		//2、添加推荐商品
		// 获取左边长图dom对象
		let hostLeft = $('.host-left');
		let hostLthHtml = '';
		//获取右边列表图ul对象
		let hostRight = $('.host-right>ul');
		let hostRtHtml = '';
		//获取mobile数据
		let mobile = data.mobile;
		//设置左边长图
		hostLthHtml += `<img src="${mobile.imgSrc}">`;
		hostLeft.html(hostLthHtml);
		//设置右边列表图
		let moGoods = mobile.goods;
		//添加右边列表图
		hostRight.html(createHtmlLi(moGoods));
		// console.log(hostRtHtml)
		/* 1、懒加载 */
		$(function() {
			$("img").lazyload({
				effect: "fadeIn"
			});
		});
	}
})

// 推荐商品
$.ajax({
	url: 'http://phpclub.org.cn:8080/api//system/recommend',
	type: 'post',
	dataType: "json",
	success: function(data) {
		//判断数据存在
		if (!data.data) {
			return;
		}
		//设置映射关系
		let daye = {
			"crazy": '疯狂抢购',
			"hot": '热卖商品',
			"rec": "推荐商品",
			"new": "新品推荐",
			'guess': '猜你喜欢'
		}
		let datas = data.data;
		//1、设置推荐商品标题
		let florTitle = $('.flor-title>ul');
		let ftitleHtml = '';
		for (let i in datas) {
			ftitleHtml += `<li data-name="${i}">${daye[i]}</li>`;
		}
		//添加商品标题
		florTitle.html(ftitleHtml);
		//2、具体商品设置默认值
		let hotData = datas.hot;
		//获取具体商品对象
		let shape = $('.shape>ul');
		shape.html(createHtmlLi(hotData))
		//3、监听用户点击推荐标题
		florTitle.on('click', 'li', function(e) {
			//获取点击事件源
			let daName = $(this).attr("data-name");
			//替换数据
			shape.html(createHtmlLi(datas[daName]));
			$(this).attr({
				'class': "active"
			}).siblings().attr({
				'class': ""
			})
			/* 1、懒加载 */
			$(function() {
				$("img").lazyload({
					effect: "fadeIn"
				});
			});
		})
		/* 1、懒加载 */
		$(function() {
			$("img").lazyload({
				effect: "fadeIn"
			});
		});
	}
})

/**
 * 方法说明 用于渲染商品html
 * @param {Object} datas 表示输入数据对象
 * @return {String} 表示返回html字符串
 */
function createHtmlLi(datas) {
	let hostRtHtml = '';
	for (let i = 0; i < datas.length; i++) {
		hostRtHtml += `<li data-Id="${datas[i].id}" data-typeId="${datas[i].typeId}" data-categoryId="${datas[i].categoryId}">
							<a href="javascript:void(0)">
								<div class="fig-img">
									<img data-original="${datas[i].goodsImg} " class='lazy'/>
									</div>
									<h3 class="title">${datas[i].goodsName}</h3>
									<p class="desc">${datas[i].goodsBody}</p>
									<p class="pice">
										<span>￥${parseInt(datas[i].marketPrice) }</span> <span>${parseInt(datas[i].shopPrice)}</span>
									</p>
								</a>
							</li>`;
	}
	return hostRtHtml;
}

// 三、为商品添加点击事件
$('.host-right ul a').on('click',function(){
	return false;
})
$('.host-right ul').on('click','li',function(e){
	console.log("KKKK")
	// 1、获取商品id
	let id = $(this).attr('data-id');
	location.href = `./html/shoppingcart.html?${getCookie("jd")}&goodsId=${id}`;
})


// 地区列表添加地区点击委托
$('.map-land>.item-lists').on('click', '.item', function(e) {
	//设置背景
	$(this).siblings().css({
		background: '#fff'
	});
	$(this).css({
		background: ' #f10215'
	});
	//设置当前当前
	$('.map>.nav-show>.icon-a>.font').html($(this).text().trim());
})
$('.map-land>.item-lists').on('mouseenter', '.item', function(e) {
	//设置背景
	$(this).css({
		background: '#f10215'
	});
}).on('mouseleave', '.item', function(e) {
	//设置背景
	$(this).css({
		background: '#fff'
	});
})

// 为分类导航添加事件委托
$('.cont-menus>ul').on('click','li',function(e){
	// 获取分类id
	let cateroy = $(this).attr("data-id");
	// 跳转至分页页面
	location.href = "./html/category.html?categoryId="+cateroy;
})

// 地址点击事件
$('#goaddress').on('click',function(e){
	// 判断登录
	if(!userOption.id){
		//跳转登录
		location.href = "html/login.html";
		return;
	}
	location.href = "html/address.html";
})